<!DOCTYPE html>
<html>
	<title>HTML5调用百度地图API进行地理定位实例</title>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ryIYLGI1M8onLlCiO1Xp1Iba11drhBMb">
		</script>
	</head>
	<body style="margin:50px 10px;">
		<div id="status" style="text-align: center"></div>
		<div style="width:100%;height:700px;border:1px solid gray;margin:30px auto" id="container"></div>
	</body>
</html>

<script type="text/javascript">
	//东华理工大学的经纬度 
	var x = 116.352895,
		y = 28.002195;
	window.onload = function() {
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(showPosition);
			document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
			// 百度地图API功能    
			var map = new BMap.Map("container");
			var point = new BMap.Point(x, y); // 创建点坐标 ,东华理工大学
			map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
			map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
			// 添加地图类型空间
			var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
			map.addControl(scaleCtrl);
			var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
			map.addControl(zoomCtrl);
			var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
			map.addControl(cityCtrl);

			var geolocation = new BMap.Geolocation();
			geolocation.getCurrentPosition(function(r) {
				if (this.getStatus() == BMAP_STATUS_SUCCESS) {
					var mk = new BMap.Marker(r.point);
					map.addOverlay(mk);
					map.panTo(r.point);
				} else {
					alert('failed' + this.getStatus());
				}
			}, {
				enableHighAccuracy: true
			})
			return;
		}
		alert("你的浏览器不支持获取地理位置！");
	};

	function showPosition(position) {
		x = position.coords.latitude;
		y = position.coords.longitude;
	}
</script>